<template>
  <div class="menu-container">
    <div class="menu-bar-con">
      <button class="menu-bar-btn" @click="isOpenChange" v-bind:class="{'btn-active':isOpen}">
        <span class="iconfont" :class="isOpen?'icon-zhankaicaidan':'icon-shouqicaidan'"></span>
        <span class="menu-name">菜单</span>
      </button>
    </div>
    <ul class="menu-item-list">
      <menu-item v-for="(item, itemIndex) in iconImgArr" :radius="radius" :index="itemIndex" :key="itemIndex"
        :angleCur="startAngle+angleStep*itemIndex" :animationDuration="animationDuration"
        :itemAnimationDelay="0 + (itemIndex * itemAnimationDelay)" :icon="item.icon" :label="item.label" :showItem="showItem"
        :isOpen="isOpen" :total="iconImgArr.length" :currentIndex="currentIndex" v-on:showItemChange="showItemChange"
        v-on:isOpenChange="isOpenChange" v-on:animationCountIncrease=" (val) => {animationCountIncrease(val)}">
      </menu-item>

    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
  import Vue from 'vue'
  import item from './Item.vue'
  export default {
    props: {
      startAngle: {
        default: 0
      },
      radius: {
        default: 100
      },
      itemAnimationDelay: {
        default: 0.04
      },
      animationDuration: {
        default: 0.3
      },
      endAngle: {
        default: 315
      },
      itemNum: {
        default: 8
      },
      iconImgArr: Array
    },
    data() {
      return {
        showItem: true,
        isOpen: false,
        total: this.iconImgArr.length,
        count: 0,
        currentIndex: -1
      }
    },

    computed: {
      angleStep() {
        return (this.endAngle - this.startAngle) / (this.itemNum - 1)
      }
    },
    created() {
    },
    methods: {
      animationCountIncrease() {
        this.count++
        if (this.count === this.total) {
          this.isOpenChange()
          this.count = 0
        }
      },
      showItemChange(index) {
        // this.showItem = false
        this.currentIndex = index
        this.$emit('onClick', index)
        // go router
      },
      isOpenChange() {
        if (!this.isOpen && !this.showItem) {
          this.showItem = true
        }
        this.isOpen = !this.isOpen
      },
      setAmination() {
        let angleCur = this.startAngle

      }

    },
    components: {
      'menu-item': item

    }
  }
</script>
<style lang="less">
  @primary-color: #2F54EB;
  @primary-3: #adc6ff;
  .menu-container{
    user-select: none;
    border-radius: 50%;
    transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    .menu-name{
      display: block;
      font-size: 12px;
      line-height: 1.4;
    }
    .menu-bar-con {
      .menu-bar-btn {
        position: absolute;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        z-index: 1;
        cursor: pointer;
        transition: all .28s cubic-bezier(.4, 0, .2, 1);
        outline: none;
        background-image: linear-gradient(@primary-3, @primary-color);
        color: #fff;
        outline: none;
        border:3px @primary-3 solid;

        &.btn-active {
          opacity: 1;
        }

        &:hover {
          box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2);
        }

        .icon {
          font-size: 32px;
          line-height: 60%;
          position: relative;
        }
      }
      .item-wrapper{
        background-image: linear-gradient(@primary-3, @primary-color);
        color: @primary-color;
      }
    }
    .item{
      .item-wrapper{
        background-image: linear-gradient(@primary-3, @primary-color);
        color: @primary-color;
        .item-btn{
          line-height: 100%;
          color: #fff;
          outline: none;
          border:3px @primary-3 solid;
        }
      }
    }
    .menu-item-list {
      list-style-type: none;
    }
  }
</style>
